import React from 'react';
import { Layout, Card, Typography, Button, Space, Row, Col } from 'antd';
import { Link } from 'react-router-dom';
import { 
  FileProtectOutlined, 
  UnlockOutlined, 
  CloudDownloadOutlined,
  SafetyCertificateOutlined,
  FolderOpenOutlined,
  RocketOutlined,
  LikeOutlined,
  MessageOutlined,
  ShareAltOutlined,
  QrcodeOutlined,
  PictureOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

// 产品特性数据
const features = [
  {
    icon: <SafetyCertificateOutlined style={{ fontSize: '32px', color: '#1890ff' }} />,
    title: '安全加密',
    description: '采用先进的加密技术，确保您的文件安全无忧'
  },
  {
    icon: <FolderOpenOutlined style={{ fontSize: '32px', color: '#52c41a' }} />,
    title: '资源管理',
    description: '便捷的资源管理功能，轻松组织您的文件'
  },
  {
    icon: <RocketOutlined style={{ fontSize: '32px', color: '#722ed1' }} />,
    title: '快速解锁',
    description: '简单快捷的解锁流程，即刻获取所需资源'
  }
];

// 三连解锁流程数据
const tripleUnlockSteps = [
  {
    icon: <LikeOutlined style={{ fontSize: '48px', color: '#ff4d4f' }} />,
    title: '三连支持UP主',
    description: '对UP主的指定视频进行点赞、投币、收藏三连'
  },
  {
    icon: <MessageOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
    title: '截图二维码界面',
    description: '在视频中的UP包包二维码展示时进行截图'
  },
  {
    icon: <ShareAltOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
    title: '上传截图解锁',
    description: '将已三连的视频截图上传到UP包包即可解锁资源'
  }
];

// 二维码密码解锁流程数据
const qrCodeUnlockSteps = [
  {
    icon: <QrcodeOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
    title: '获取二维码',
    description: '在UP主的充电视频收费部分查看到二维码密码'
  },
  {
    icon: <PictureOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
    title: '截图上传',
    description: '截图包含二维码的界面并上传到UP包包'
  },
  {
    icon: <CloudDownloadOutlined style={{ fontSize: '48px', color: '#722ed1' }} />,
    title: '获取资源',
    description: '验证成功后即可访问和下载资源'
  }
];

// 传统秘钥解锁流程数据
const traditionalUnlockSteps = [
  {
    icon: <FileProtectOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
    title: '获取秘钥',
    description: '从指定渠道获取文件解锁秘钥'
  },
  {
    icon: <UnlockOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
    title: '输入秘钥',
    description: '在解锁页面输入解锁秘钥'
  },
  {
    icon: <CloudDownloadOutlined style={{ fontSize: '48px', color: '#722ed1' }} />,
    title: '获取资源',
    description: '验证成功后即可访问和下载资源'
  }
];

// 解锁方式配置
const unlockMethods = [
  {
    title: '三连解锁流程',
    description: '通过支持UP主的视频三连操作，您可以获得解锁资源的权限。这是一种全新的资源获取方式，既支持了UP主创作，又能获取所需资源。',
    steps: tripleUnlockSteps,
    button: {
      text: '尝试三连解锁',
      icon: <LikeOutlined />,
      style: {
        background: 'linear-gradient(45deg, #ff4d4f, #ff7a45)',
        border: 'none'
      }
    }
  },
  {
    title: '二维码密码解锁流程',
    description: '适合充电视频的场景，UP主在充电视频的收费部分展示二维码密码，用户截图，并到UP包包上传图片即可解锁。',
    steps: qrCodeUnlockSteps,
    button: {
      text: '二维码密码解锁',
      icon: <QrcodeOutlined />,
      style: {
        background: 'linear-gradient(45deg, #1890ff, #40a9ff)',
        border: 'none'
      }
    }
  },
  {
    title: '传统秘钥解锁流程',
    description: '通过获取传统文本秘钥，您可以解锁相应资源。这是最基础的解锁方式，适用于各种场景。',
    steps: traditionalUnlockSteps,
    button: {
      text: '传统秘钥解锁',
      icon: <UnlockOutlined />,
      style: {
        background: 'linear-gradient(45deg, #1890ff, #40a9ff)',
        border: 'none'
      }
    }
  }
];

// 渲染解锁流程步骤卡片
const renderUnlockSteps = (steps) => (
  <Row gutter={[32, 32]} justify="center">
    {steps.map((step, index) => (
      <Col xs={24} sm={12} md={8} key={index}>
        <Card style={{ 
          textAlign: 'center',
          backgroundColor: 'rgba(255, 255, 255, 0.05)',
          backdropFilter: 'blur(10px)',
          borderRadius: '10px',
          height: '100%'
        }} bordered={false}>
          <Space direction="vertical" size="middle">
            {step.icon}
            <Title level={4} style={{ color: '#fff', margin: 0 }}>
              {step.title}
            </Title>
            <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
              {step.description}
            </Paragraph>
          </Space>
        </Card>
      </Col>
    ))}
  </Row>
);

// 渲染解锁方式区域
const renderUnlockMethod = (method, index) => {
  return (
    <div 
      style={{ 
        background: 'rgba(0, 0, 0, 0.2)',
        padding: '60px 20px',
        maxWidth: '1200px', 
        margin: '0 auto 20px auto'
      }}
      key={index}
    >
      <Title level={2} style={{ color: '#fff', textAlign: 'center', marginBottom: '40px' }}>
        {method.title}
      </Title>
      <Paragraph style={{ 
        color: 'rgba(255, 255, 255, 0.8)', 
        fontSize: '16px', 
        textAlign: 'center',
        maxWidth: '800px',
        margin: '0 auto 40px'
      }}>
        {method.description}
      </Paragraph>
      
      <div style={{ 
        padding: '40px 20px',
        borderRadius: '10px'
      }}>
        {renderUnlockSteps(method.steps)}
        <div style={{ textAlign: 'center', marginTop: '40px' }}>
          <Link to="/unlock">
            <Button 
              type="primary" 
              size="large"
              icon={method.button.icon}
              style={{
                ...method.button.style,
                borderRadius: '6px',
                padding: '0 30px',
                height: '45px'
              }}
            >
              {method.button.text}
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
};

const Home = () => {
  return (
    <div>
      {/* Banner 区域 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.05)',
        padding: '60px 20px',
        textAlign: 'center',
        marginBottom: '40px'
      }}>
        <Title level={1} style={{ color: '#fff', marginBottom: '20px' }}>
          欢迎来到 UP包包
        </Title>
        <Paragraph style={{ color: 'rgba(255, 255, 255, 0.8)', fontSize: '18px', maxWidth: '600px', margin: '0 auto 30px' }}>
          一个为UP主提供的安全可靠的资源解锁平台，通过秘钥或三连验证，分享您需要的文件资源
        </Paragraph>
        <Link to="/unlock">
          <Button 
            type="primary" 
            size="large"
            icon={<UnlockOutlined />}
            style={{
              background: 'linear-gradient(45deg, #1890ff, #40a9ff)',
              border: 'none',
              borderRadius: '6px',
              padding: '0 30px',
              height: '45px'
            }}
          >
            立即解锁资源
          </Button>
        </Link>
      </div>

      {/* 特性介绍 */}
      <div style={{ padding: '0 20px 40px', maxWidth: '1200px', margin: '0 auto' }}>
        <Title level={2} style={{ color: '#fff', textAlign: 'center', marginBottom: '40px' }}>
          为什么选择 UP包包
        </Title>
        <Row gutter={[32, 32]} justify="center">
          {features.map((feature, index) => (
            <Col xs={24} sm={12} md={8} key={index}>
              <Card 
                style={{ 
                  textAlign: 'center',
                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(10px)',
                  borderRadius: '10px',
                  height: '100%'
                }} 
                bordered={false}
              >
                <Space direction="vertical" size="middle">
                  {feature.icon}
                  <Title level={4} style={{ color: '#fff', margin: 0 }}>
                    {feature.title}
                  </Title>
                  <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                    {feature.description}
                  </Paragraph>
                </Space>
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      {/* 解锁方式区域 */}
      {unlockMethods.map((method, index) => renderUnlockMethod(method, index))}

      {/* Footer区域留白 */}
      <div style={{ height: '100px' }}></div>
    </div>
  );
};

export default Home;